zxt.ux = {};

/**
 * 该类表示一个简单的按钮控件, 该按钮支持的特性包括了
 * <ul>
 * <li>支持定制单击事件</li>
 * <li>支持灰化状态</li>
 * <li>支持隐藏状态</li>
 * </ul>
 * 
 * @class 表示一个按钮对象
 * @param {string} label 按钮的标签
 * @param {string} [text] 按钮的显示文本, 未指定时使用传入的标签作为显示
 */
zxt.ux.Button = function(label, text) {
	zxt.ui.Widget.call(this);

	this._label = label;
	this._text = text || label;
	this.jqDom = $("<div>");
	this._btn = $("<input type=button>").addClass("zxt-Button");

	this._clickFunc = null;

};

/**
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的按钮对象
 * 
 * @function
 * @static
 * @param {DOM} elem 解析的DOM元素
 * @return {zxt.ui.Button} 根据传入的DOM元素创建的按钮对象
 */
zxt.ux.Button.parse = function(elem) {
	var j = $(elem);

	var _label = j.attr("zxt.label");
	var _text = j.attr("zxt.text");

	_text = zxt.i18n.translateString(_text);

	var _id = j.attr("id");
	var _fun = "onClick$" + _id;
	var _clickFunc = window[_fun];
	var _enabled = j.attr("zxt.enabled") == false || j.attr("zxt.enabled") == "false"? false : true;
	var _instance = new zxt.ux.Button(_label, _text);
	_instance._enabled = _enabled;
	if (zxt.util.isFunction(_clickFunc)) {
		_instance._clickFunc = _clickFunc;
	};
	return _instance;
};

zxt.defineClazz(zxt.ux.Button, zxt.ui.Widget);

/**
 * <p>
 * 返回按钮的控件类型
 * </p>
 * 
 * @function
 * @returns {string} "zxt.ui.Button"
 */
zxt.ux.Button.prototype.getType = function() {
	return "zxt.ux.Button";
};

/**
 * <p>
 * 返回按钮的标签
 * </p>
 * 
 * @function
 * @returns {string} 该按钮的标签
 */
zxt.ux.Button.prototype.label = function() {
	return this._label;
};

zxt.ux.Button.prototype.clickFunc = function(v) {
	if (v === undefined) {
		return this._clickFunc;
	}
	this._clickFunc = v;
};

/**
 * <p>
 * 渲染该按钮的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ux.Button.prototype.render = function() {
	var host = this;
	this.jqDom.empty();

	this._btn.val(this._text);
	this._btn.click(function() {
		host.onClick();
	});
	this.setEnable(this._enabled);
	this.jqDom.append(this._btn);
	return this.jqDom.get(0);
};

/**
 * 按钮的点击事件处理, 可以重设该函数来定制单击事件逻辑.
 * 
 * @event
 */
zxt.ux.Button.prototype.onClick = function() {
	var btnId = this.id();
	if (zxt.util.isAvailable(btnId)) {
		zxt.Page.INSTANCE.event("onClick", btnId);
		if (zxt.util.isFunction(this._clickFunc)) {
			this._clickFunc.call(this);
		}
	}
};

/**
 * 设置按钮的显示状态, 可以用来隐藏和显示该按钮.
 * 
 * @function
 * @param {boolean} true - 显示按钮, false - 隐藏按钮
 */
zxt.ux.Button.prototype.setDisplay = function(d) {
	if (d == null || d) {
		this._btn.css("display", "");
	} else {
		this._btn.css("display", "none");
	}
};

/**
 * 返回按钮的显示状态
 * 
 * @function
 * @returns {boolean} true - 显示状态, false - 隐藏状态
 */
zxt.ux.Button.prototype.isDisplay = function() {
	return this._btn.css("display") != "none";
};

/**
 * 设置按钮的可用状态, 可以用来灰化和恢复该按钮.
 * 
 * @function
 * @param {boolean} true - 恢复按钮, false - 灰化按钮
 */
zxt.ux.Button.prototype.setEnable = function(e) {
	if (e == null || e) {
		this._btn.removeAttr("disabled");
	} else {
		this._btn.attr("disabled", "true");
	};
};




/**
 * 文本框, 可以获取用户的输入文本
 * 
 * @class 文本框控件类
 */
zxt.ux.Textbox = function(required, tip, vd) {

	zxt.ui.Interactor.call(this);

	this._$input = $("<input type=\"text\"/>");

	this._$jqDom = $("<div nowrap>");
	this._$jqInner = null;

	this._tip = tip;// 提示信息	
	this._validator = vd;
	this._required = (required == true || required == "true");
};

/**
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的文本框对象
 * 
 * @function
 * @static
 * @param {DOM} elem 解析的DOM元素
 * @return {zxt.ui.Label} 根据传入的DOM元素创建的文本框对象
 */
zxt.ux.Textbox.parse = function(elem) {
	var j = $(elem);

	var _val = j.attr("zxt.value");
	// var _instance = new zxt.ui.Textbox();

	var _required = j.attr("zxt.required");
	var _regex = j.attr("zxt.regex");
	var _regexPromot = j.attr("zxt.regexPrompt");
	var _type = j.attr("zxt.type");
	var _tip = j.attr("zxt.tip");

	var _tv = zxt.core.ValidatorManager.getValidator(_type);
	var _rv = null;

	if (zxt.util.isAvailable(_regex)) {
		_rv = new zxt.core.ValidatorElement();
		var reg = new RegExp(_regex);
		_rv.regex(reg);
		_rv.prompt(_regexPromot || _regex);
	};

	var vds = null;
	if (zxt.util.isAvailable(_tv) && zxt.util.isAvailable(_rv)) {
		vds = new zxt.core.ValidatorChain();
		vds.chain(_tv).chain(_rv);
	} else if (zxt.util.isAvailable(_tv)) {
		vds = _tv;
	} else {
		vds = _rv;
	};

	var _instance = new zxt.ux.Textbox(_required, _tip, vds);

	_instance.val(_val);
	return _instance;
};

zxt.defineClazz(zxt.ux.Textbox, zxt.ui.Interactor);

/**
 * 返回控件类型
 * 
 * @function
 * @returns {string} "text"
 */
zxt.ux.Textbox.prototype.getType = function() {
	return "zxt.ux.Textbox";
};

/**
 * 验证值的合法性
 * 
 * @function
 * @returns {boolean} 返回true
 */
zxt.ux.Textbox.prototype.validate = function(value) {
	if (!zxt.util.isAvailable(this._validator)) {
		return [];
	};
	return this._validator.validate(value);
};

zxt.ux.Textbox.prototype._validateValue = function(ivalue) {

	if (zxt.util.isAvailable(ivalue)) {
		var errs = this.validate(ivalue);
		if (errs.length == 0) {
			this._$input.addClass("textbox-checked").removeClass(
					"textbox-invalid");
		} else {
			this._$input.addClass("textbox-invalid").removeClass(
					"textbox-checked");
			zxt.Page.INSTANCE.onValidationErrors(errs);
		};
	} else {
		this._$input.removeClass("textbox-invalid").removeClass(
				"textbox-checked");
	};
};

/**
 * <p>
 * 渲染该文本框的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ux.Textbox.prototype.render = function() {
	var instance = this;
	var content = this.val() || this._tip || '';
	var input = this._$input;

	if (zxt.util.isAvailable(this.id()) && zxt.cfg.nameNative) {
		input.attr("name", this.id());
	};

	input.addClass("textbox");

	if (this._required) {
		input.addClass("textbox-required");
	} else {
		input.addClass("textbox-optional");
	};

	// 验证
	input.blur(function() {
		instance.onBlur();
	});
	input.focus(function() {
		instance.onFocus();
	});

	input.width("100%");
	input.val(content);
	this._validateValue(this.val());

	this._$jqInner = input;
	this._$jqDom.empty();
	this._$jqDom.append(this._$jqInner);
	return this._$jqDom.get(0);
};

zxt.ux.Textbox.prototype.onBlur = function() {
	var input = this._$input;
	input.removeClass("textbox-focus");
	var ivalue = input.val();
	this.val(ivalue);
	var vstr = ivalue || this._tip;
	input.val(vstr);
	this._validateValue(ivalue);
};

zxt.ux.Textbox.prototype.onFocus = function() {
	var input = this._$input;
	input.addClass("textbox-focus");
	var vstr = this.val() || "";
	input.val(vstr);
};

/**
 * 返回文本框中输入的字符串
 * 
 * @function
 * @returns {string} 文本框中的值
 */
zxt.ux.Textbox.prototype.getSelfValue = function() {
	if (this._$jqInner == null) {
		return null;
	}
	return this._$jqInner.val();
};

/**
 * 下拉框, 可以获取用户的选择
 * 
 * @class 下拉框控件类
 */
zxt.ux.Select = function() {
	zxt.ui.Interactor.call(this);
	this._jqDom = $("<div nowrap>");
	this._jqInner = null;
};

/**
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的下拉选择框对象
 * 
 * @function
 * @static
 * @param {DOM} elem 解析的DOM元素
 * @return {zxt.ui.Select} 根据传入的DOM元素创建的下拉选择框对象
 */
zxt.ux.Select.parse = function(elem) {
	var j = $(elem);

	var _instance = new zxt.ux.Select();
	return _instance;
};

zxt.defineClazz(zxt.ux.Select, zxt.ui.Interactor);

/**
 * 返回控件类型
 * 
 * @function
 * @returns {string} "zxt.ui.Select"
 */
zxt.ux.Select.prototype.getType = function() {
	return "zxt.ui.Select";
};

/**
 * 设置多选框的选项列表
 * 
 * @function
 * @param {map} 下拉框的选项列表
 */
zxt.ux.Select.prototype.setOptions = function(pOptions) {
	this.options = pOptions;
};

/**
 * 验证值的合法性
 * 
 * @function
 * @returns {boolean} 返回true
 */
zxt.ux.Select.prototype.validate = function(value) {
	return true;
};

/**
 * <p>
 * 渲染该下拉框的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ux.Select.prototype.render = function() {
	var val = this.val() || '';
	var select = $("<select/>");
	if (zxt.util.isAvailable(this.id()) && zxt.cfg.nameNative) {
		select.attr("name", this.id());
	};

	select.addOption(this.options, false);
	select.selectOptions(val);
	select.width("100%");
	select.addClass("textbox");

	if (this._required) {
		select.addClass("textbox-required");
	};

	select.focus(function() {
		select.addClass("textbox-focus");
		select.removeClass("textbox-required");
		select.removeClass("textbox-checked");
	});

	select.blur(function() {
		select.addClass("textbox-checked");
		select.removeClass("textbox-focus");
	});

	this._jqInner = select;
	this._jqDom.empty();
	this._jqDom.append(this._jqInner);
	return this._jqDom.get(0);
};

/**
 * 获取下拉框当前选择的值
 * 
 * @function
 * @returns {string} 下拉框当前选择的值
 */
zxt.ux.Select.prototype.getSelfValue = function() {
	if (this._jqInner == null) {
		return null;
	}
	return this._jqInner.val();
};



/**
 Clock 时钟控件
**/
zxt.ui.ClockConfig = {
	clock        : zxt.cfg.IMAGES_PATH + '/zxt_clock_clock.png',
	clockMask    : zxt.cfg.IMAGES_PATH + '/zxt_clock_mask.png',
	hourHand     : zxt.cfg.IMAGES_PATH + '/zxt_clock_hourhand.png',
	minHand      : zxt.cfg.IMAGES_PATH + '/zxt_clock_minhand.png',
	secHand      : zxt.cfg.IMAGES_PATH + '/zxt_clock_sechand.png'	
};


zxt.ui.Clock= function(flag){	
	zxt.ui.Widget.call(this);		
	this._bFlag = flag || 1;	
	this._$jqDom = $("<div class='zxt-Widget'>");	
	if( this._bFlag == 2 ){
		this._$jqDom.css("position", "relative").css("height", "120px");
	}
};

zxt.defineClazz(zxt.ui.Clock, zxt.ui.Widget);

zxt.ui.Clock.prototype.getType = function() {
	return "zxt.ui.Clock";
};

/*
 * 初始化函数，this._bFlag为1，显示电子钟
 *                          2，显示圆形钟
 *                          3, 显示图片合成的时钟
 * 
 * 
 * 
 */
zxt.ui.Clock.prototype._initialize = function() {
	if(this._bFlag == 1){
		this._initializeE();
	} else if(this._bFlag == 2){
		this._initializeC();
	}else if(this._bFlag == 3){	  
	  this._initializeP();
	  }
};

/**初始化电子钟
*/
zxt.ui.Clock.prototype._initializeE = function() {
	this._tablePanel = new zxt.ui.TablePanel(1, 3);
	this._panelDom = this._tablePanel.render();	
	this._$jqDom.empty().append(this._panelDom);
};

/**初始化圆形钟
*/
zxt.ui.Clock.prototype._initializeC = function() {
	this._pX=60;// 140
	this._pY=50;// 160
	if (document.all){
		this._pX=70;//140
		this._pY=55;// 150
	}
	
	this._showClock();	//产生JDOM的DOM结点
	this._positionClockHandle();//得到表盘的数字位置
	this._positionClockFace();//得到表针的位置
};

zxt.ui.Clock.prototype._showClock =function(){
	var numberShow="<div id=c0 ></div>"+
	          			"<div id=c1><p><b>1</b></p></div>"+
	          			"<div id=c2><p><b>2</b></p></div>"+
	          			"<div id=c3><p><b>3</b></p></div>"+
	          			"<div id=c4><p><b>4</b></p></div>"+
	          			"<div id=c5><p><b>5</b></p></div>"+
	          			"<div id=c6><p><b>6</b></p></div>"+
	          			"<div id=c7><p><b>7</b></p></div>"+
	         			  "<div id=c8><p><b>8</b></p></div>"+
	          			"<div id=c9><p><b>9</b></p></div>"+
	          			"<div id=c10><p><b>10</b></p></div>"+
	          			"<div id=c11><p><b>11</b></p></div>"+
	          			"<div id=c12><p><b>12</b></p></div>";
	 
	var handShow="<div id=ob0></div>" +
	             "<div id=ob1><p><font  color=#0000ff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob2><p><font  color=#0000ff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob3><p><font  color=#0000ff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob4><p><font  color=#0000ff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob5><p><font  color=#0000ff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob6><p><font  color=#00ffff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob7><p><font  color=#00ffff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob8><p><font  color=#00ffff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob9><p><font  color=#00ffff size=+3><b>.</b></font></p></div>"+
	             "<div id=ob10><p><font color=#f30000 size=+3><b>.</b></font></p></div>"+
	             "<div id=ob11><p><font color=#f30000 size=+3><b>.</b></font></p></div>"+
	             "<div id=ob12><p><font color=#f30000 size=+3><b>.</b></font></p></div>";
	 var clockHTML = numberShow + handShow;
	 this._$jqDom.html(clockHTML);	//此时产生的DOM节点游离于HTML之外	 
	  
}  


zxt.ui.Clock.prototype._positionClockHandle =function(){
	this._obs = new Array(13);
	for ( var i=0; i<13; i++) {
		if (document.all) {
		var lab="ob"+i;
		var style = $("#"+lab, this._$jqDom).get(0).style;
		this._obs[i]=new Array (style,-100,-100);
	}	else {
		var lab="ob"+i;
		var style = $("#"+lab, this._$jqDom).get(0).style;
		this._obs[i] = new Array (style,-100,-100);
		}
	};	
}

zxt.ui.Clock.prototype._positionClockFace =function(){	
	this._positionClockNum (0,-67,-65);
	this._positionClockNum (1,10,-51);
	this._positionClockNum (2,28,-33);
	this._positionClockNum (3,35,-8);
	this._positionClockNum (4,28,17);
	this._positionClockNum (5,10,35);
	this._positionClockNum (6,-15,42);
	this._positionClockNum (7,-40,35);
	this._positionClockNum (8,-58,17);
	this._positionClockNum (9,-65,-8);
	this._positionClockNum (10,-58,-33);
	this._positionClockNum (11,-40,-51);
	this._positionClockNum (12,-16,-56);
};


zxt.ui.Clock.prototype._positionClockNum=function (a,b,c){
	if (document.all) {
		if (a!=0) b+=-1
		var lab="c"+a;
		var style = $("#"+lab, this._$jqDom).get(0).style;		
		style.pixelTop=+(this._pY+(c));
		style.pixelLeft=+(this._pX+(b));
	} else {		
		if (a!=0) b+=10;
		var lab="c"+a;
		var style = $("#"+lab, this._$jqDom).get(0).style;		
		style.top =+(this._pY+(c))+"px";
	  style.left =+(this._pX+(b))+"px";		
	}
	var lab="c"+0;
	var style = $("#"+lab, this._$jqDom).get(0).style;		
	if (document.all) style.pixelLeft=26
};

zxt.ui.Clock.prototype._timeE = function(time) {
	var host = this;	
	var h=time.getHours()
	var m=time.getMinutes()
	var s=time.getSeconds()
		
	if (m<10){m="0" + m}
	if (s<10){s="0" + s}
			
	$(this._tablePanel.getCell(0, 0)).text(h+":");
	$(this._tablePanel.getCell(0, 1)).text(m+":");
	$(this._tablePanel.getCell(0, 2)).text(s);	
};

zxt.ui.Clock.prototype._timeC =function(time) { 
	var host = this; 	
	var sec = time.getSeconds()
	//if (sec!=host._lastsec)
	 {
		host._lastsec = sec
		sec=Math.PI*sec/30
		min=Math.PI*time.getMinutes()/30
		hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
		for (i=1;i<6;i++) {
			host._obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;
			if (document.layers) host._obs[i][1]+=10;
			host._obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;
		}
		for (i=6;i<10;i++) {
			host._obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;
			if (document.layers) host._obs[i][1]+=10;
			host._obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;
		}
		for (i=10;i<13;i++) {
			host._obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;
			if (document.layers) host._obs[i][1]+=10;
			host._obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;
		}
	}  
	
	for (i=0; i<13; i++) {
		var   pX=this._pX+10;
  	var   pY=this._pY+10;
  	if (document.all) 
  		{  	
     	pX=this._pX;
     	pY=this._pY+10;
  		}
			this._obs[i][0].left=this._obs[i][1]+pX//this._pX;
			this._obs[i][0].top=this._obs[i][2]+pY//this._pY;
	}
};

/**
 *第三种样式的时钟
 *
*/
zxt.ui.Clock.prototype._PoorClock =function(){
		
	if(this._PoorClock.hasStyle !=true)
	{ 
		var cbs = this._cb.style;
		cbs.background="purple";
		cbs.color = "yellow";
		cbs.padding = "3px";
		cbs.border="solid 1px yellow";
		cbs.fontSize= "12px";
		cbs.height="auto";
		cbs.width="auto";
		cbs.fontFamily = "Verdana";	
		cbs.whiteSpace="nowrap";
		cbs.fontWeight="bold";
			 
		if(document.all && document.uniqueID)
		{
				
			try
			{
				cbs.cursor = "hand";
				cbs.filter="progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')"; 
			}catch(e){};
			}
		else
		{
			cbs.cursor = "pointer";	
		};			
		this._PoorClock.hasStyle = true;
		};	  
		
		var d= this._getTime();
		
		this._cb.innerHTML= this._formatDateString(this._getTime(),true); 		
};

zxt.ui.Clock.prototype._fnSetRotation =function (oObj, deg,cw,ch){ 
	var deg2radians = Math.PI * 2 / 360;   
	rad = deg * deg2radians;
	var costheta = Math.cos(rad);
	var sintheta = Math.sin(rad);	

	try{
		oObj.filters.item(0).M11 = costheta;
		oObj.filters.item(0).M12 = -sintheta;
		oObj.filters.item(0).M21 = sintheta;
		oObj.filters.item(0).M22 = costheta;
		}catch(e){
		
		this._PoorClock();
		return false;
		};				
				
	oObj.style.left =  cw/2 - oObj.offsetWidth/2 + "px";
	oObj.style.top = ch/2 - oObj.offsetHeight/2 + "px";					
};

zxt.ui.Clock.prototype._timeP = function(time){ 
    
	this._cb.innerHTML = '<canvas width=0 height=0></canvas>';		
	var cbs = this._cb.style;
	cbs.cssText = "-moz-border-radius:6px;"
	cbs.width = this._clockbg.width + "px";
	cbs.height = this._clockbg.width + "px";
	cbs.position = "relative";	
	var canvas = this._cb.getElementsByTagName("canvas")[0];
		
	if(!canvas || !canvas.getContext)
	{
				
		if(document.all && document.namespaces && document.uniqueID)
		{ 
			/*IE5.5+ Version*/
			try{			  
				var cw = this._clockbg.width;
				var ch = this._clockbg.height;
	        
				var s1 = 'position:absolute;top:0;overflow:xhidden;left:0;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod=\'auto expand\');z-index:';
				var s2 = 'style="position:absolute;top:0;left:0;;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=';		
			
				this._cb.innerHTML= [ 
					/*1*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+this._clockbg.src+');width:'+cw+';height:'+ch+'px;"></div></div>',
					/*1*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+this._hourhand.src+');width:'+this._hourhand.width+';height:'+this._hourhand.height+'px;"></div></div>',
					/*2*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+this._minhand.src+');width:'+this._minhand.width+';height:'+this._minhand.height+'px;"></div></div>',
					/*3*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;"><div '+s2+this._sechand.src+');width:'+this._sechand.width+';height:'+this._sechand.height+'px;"></div></div>',
					/*4*/'<div style="'+s1+'1;width:'+cw+'px;height:'+ch+'px;cursor:hand;corsor:pointer;">1<div '+s2+this._clock_mask.src+');width:'+this._clock_mask.width+';height:'+this._clock_mask.height+'px;"></div></div>',
					].join("");			
			   
				var divs = this._cb.childNodes;			   
	
				cw = cw + this._offsetWidth;
				ch = ch + this._offsetHeight;			

				for(var i=1;i<=3;i++)
				{
					var d = divs[i];
					var dd = d.getElementsByTagName("div")[0];				
				
					d.staticLeft = ( cw )/2;
					d.staticTop = ch /2;
					dd.style.left = ( cw - dd.offsetWidth)/2 + dd.offsetWidth/3 + "px";
					dd.style.top = ch /2 + "px";				
				};	
									
				var now = this._getTime();
				this._cb.title =  this._formatDateString(now); 

				var hoursAngle = (now.getHours()%12)/12*360 + 180 ;
				var minutesAngle = (now.getMinutes()/60 )*360 + 180 ;
				var secondsAngle = (now.getSeconds()/60)*360 + 180 ;				
				
				this._fnSetRotation(divs[1],hoursAngle,cw,ch);
				this._fnSetRotation(divs[2],minutesAngle,cw,ch);
				this._fnSetRotation(divs[3],secondsAngle,cw,ch);								
				}catch(e){					
				this._PoorClock();
				};

			}
			else
			{
				/*Other Brosers*/
				this._PoorClock();
			};
		}
		else
		{
			/*Canvas Version */
			try{
			  
				var cw =  this._clockbg.width;
	    	var ch =  this._clockbg.height;		
	
	      canvas.width = cw ;
	      canvas.height = ch;	
			
	      canvas.style.background = "url(" +  this._clockbg.src + ") no-repeat";		      
	      //canvas.style.position = "absolute";	
	      
	      var now =this._getTime();	
				canvas.title =  this._formatDateString(now); 				
        
				var offsetAngle = (180/360) * (Math.PI*2);
				var minutesAngle = (now.getMinutes()/60 )*(Math.PI*2) + offsetAngle ; 
				var secondsAngle = (now.getSeconds()/60)*(Math.PI*2)  + offsetAngle ; 
				var hoursAngle = ((now.getHours()%12)/12)*(Math.PI*2) + offsetAngle ; 
			
				
				var context = canvas.getContext("2d");
				cw = cw + this._offsetWidth;
				ch = ch + this._offsetHeight;
        
				context.clearRect(0, 0,cw*2, ch*2);
				context.save();
				context.translate(cw/2,ch/2);		

				context.save();
  			context.rotate (minutesAngle);
				context.drawImage (this._minhand, -this._minhand.width/2,0, this._minhand.width, this._minhand.height);
				context.restore();

				context.save();
				context.rotate(hoursAngle);
				context.drawImage(this._hourhand,-this._hourhand.width/2,0,this._hourhand.width,this._hourhand.height);
  			context.restore();

				context.save();
				context.rotate (secondsAngle);
				context.drawImage (this._sechand, -this._sechand.width/2,0, this._sechand.width,this._sechand.height);
				context.restore();
        
        
				context.translate(-cw/2,-ch/2);			
				context.drawImage (this._clock_mask, 0,0 , this._clock_mask.width,this._clock_mask.height);
				context.restore();	
	      	      				
				}catch(e){						
				   this._PoorClock();      
				};
			
			canvas.style.cursor = "pointer";
		};  
};
/**
 * <p>
 * 获取并展示时间
 * </p>
 * 
 * @function
 * 
 */
zxt.ui.Clock.prototype.displayTime = function(t){	
	var time = t || new Date ();
	if(this._bFlag == 1){	
		this._timeE(time);
	} 
	if( this._bFlag ==2){
			this._timeC(time);
	}			
	if(this._bFlag == 3){	  		
	  this._timeP(time);
	}	
		
};

zxt.ui.Clock.prototype._getTime= function(){	
	var d = new Date;
	return d;
};

zxt.ui.Clock.prototype._formatDateString =  function(dDate,bHTMLSpace){
	
	var d = dDate;
	var p = "AM";
	var M = this._aMonths[ d.getMonth()];
		
	var D = d.getDate();
	var Y = d.getFullYear();
	var m = d.getMinutes();
	if(m<10){m = "0" + m};

	var h =  d.getHours();
	if(h>12){h-=12;p = "PM"};
	if(bHTMLSpace)
	{
		return [h,":",m,"&nbsp;",p,"<small>&nbsp;",M,"-",D,"-",Y,"</small>" ].join("");
	}
	else
	{
		return [h,":",m," ",p,"  ",M,"-",D,"-",Y].join("");
	};
};
	
zxt.ui.Clock.prototype._initializeP = function(){
  
	this._cb = document.createElement("div");
	this._oNode = this._cb;
	
	this._$jqDom.empty().append(this._cb);	
		
	this._clockbg = new Image();
	this._clockbg.src = zxt.ui.ClockConfig.clock; 
  
	this._hourhand = new Image();
	this._hourhand.src = zxt.ui.ClockConfig.hourHand;

	this._minhand = new Image();
	this._minhand.src = zxt.ui.ClockConfig.minHand; 

	this._sechand = new Image();
	this._sechand.src = zxt.ui.ClockConfig.secHand; 

	this._clock_mask = new Image();
	this._clock_mask.src = zxt.ui.ClockConfig.clockMask;  
 
 
	this._offsetWidth  = -7; 
	this._offsetHeight = -7; 	
	
	this._aMonths = ["Jan","Feb","Mar","Apr","May","June","July","August","Sep","Oct","Nov","Dec"];	
};

/**
 * <p>
 * 渲染CLOCK的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.Clock.prototype.renderSelf = function(){
	var host = this;	
	
	this._initialize();	
  setInterval(function(){host.displayTime();},100);		
  return this._$jqDom.get(0);	//返回dom结点，以便在HTML渲染	
};  